<template>
	<view class="app-index-nav dir-left-nowrap cross-center">
		<view class="app-search">
			<app-jump-button form open_type="navigate" url="/pages/search/search">
				<view class="app-icon"></view>
			</app-jump-button>
		</view>
		<view class="app-line"></view>
		<scroll-view scroll-x class="app-scroll">
			<text class="app-item" v-for="(item) in list"
			      :key="item.id"
			      :class="{'app-active-item': cat_id == item.id}"
			      @click="active(item.id)"
			>{{item.name}}</text>
		</scroll-view>
	</view>
</template>

<script>
    export default {
        name: 'app-index-nav',
        props: {
            list: {
                type: Array,
                default() {
                    return [];
                }
            },
            cat_id: [Number,String],
        },
        data() {
            return {
                activeIndex: 0,
            }
        },
        methods: {
            active(id) {
                this.$emit('click', id);
            }
        }
    }
</script>

<style scoped lang="scss">
	.app-index-nav {
		height: #{92rpx};
		background-color: white;
		width: #{750rpx};
		position: fixed;
		/*  #ifdef  H5  */
		top: 44px;
		/*  #endif  */
		/*  #ifndef  H5  */
		top: 0;
		/*  #endif  */
		left: 0;
		z-index: 1000;
		.app-search {
			width: #{108rpx};
			height: #{92rpx};
			.app-icon {
				width: #{60rpx};
				height: #{60rpx};
				background-image: url("../image/big-sarch.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
		}
		.app-line {
			width: #{1rpx};
			height: #{40rpx};
			background-color: #e2e2e2;
		}
		.app-scroll {
			width: #{641rpx};
			height: #{92rpx};
			white-space: nowrap;
			.app-item {
				display: inline-block;
				font-size: #{28rpx};
				color: #666666;
				padding: 0 #{24rpx};
				box-sizing: border-box;
				height: #{56rpx};
				line-height: #{56rpx};
				border-radius: #{28rpx};
				margin: #{18rpx} #{32rpx};
			}
			.app-active-item {
				background: linear-gradient(140deg, #ffa360, #ff5c5c);
				color: white;
			}
		}
	}
</style>